import React from "react";
// 引入子路由出口
import { Outlet } from "react-router-dom";
import { Layout, theme } from "antd";
import CommonAside from "../components/commonAside";
import CommonHeader from "../components/commonHeader";

import { useSelector } from "react-redux";
import CommonTag from "../components/commonTag";

const { Content, Footer } = Layout;
const Main = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  // 获取展开收起的菜单状态 父组件获取
const collapsed = useSelector((state) => state.tab.isCollapsed);
  return (
    <Layout style={{ minHeight: "100vh" }}>
      <CommonAside collapsed={collapsed} />
      <Layout>
        <CommonHeader collapsed={collapsed}/>
        <CommonTag />
        <Content style={{ margin: "0 16px" }}>
          {/* <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb> */}
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Main;
